<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>派生，子代选择器</title>
		<style>
			/* ⑥派生{后代}选择器：抓取元素，祖先元素内找所有匹配的子孙元素
			 语法：祖先选择器  后代任意选择器{}*/
			 #header span{
				 display:block;
				 width:50%;
				 background-color:#00ffff;
			 }
			 /* ⑦子代选择器：抓取元素，父元素内找到所有匹配的子元素
			 语法：父元素 任意选择器>子元素 任意选择器{}*/
			 #header>span{
				 background-color:#ffaa00;
			 }
			 #header>span:hover{
				 background-color:#00ff7f;
			 }
		</style>
	</head>
	<body>
		<div id="header">
			<span>左侧导航区</span>
			<span> <div class="header">
			<span>右侧导航区1</span>
			<span>右侧导航区2</span>
			</div> </span>
			</div>
	</body>
</html>